<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>reales | real estate web application</title>

        <link href="css/font-awesome.css" rel="stylesheet">
        <link href="css/simple-line-icons.css" rel="stylesheet">
        <link href="css/jquery-ui.css" rel="stylesheet">
        <link href="css/datepicker.css" rel="stylesheet">
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/app.css" rel="stylesheet">

        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body class="notransition">

        <!-- Header -->

        <div id="header">
            <div class="logo">
                <a href="index.html">
                    <span class="fa fa-home marker"></span>
                    <span class="logoText">reales</span>
                </a>
            </div>
            <a href="#" class="navHandler"><span class="fa fa-bars"></span></a>
            <div class="search">
                <span class="searchIcon icon-magnifier"></span>
                <input type="text" placeholder="Search for houses, apartments...">
            </div>
            <div class="headerUserWraper">
                <a href="#" class="userHandler dropdown-toggle" data-toggle="dropdown"><span class="icon-user"></span><span class="counter">5</span></a>
                <a href="#" class="headerUser dropdown-toggle" data-toggle="dropdown">
                    <img class="avatar headerAvatar pull-left" src="images/avatar-1.png" alt="avatar">
                    <div class="userTop pull-left">
                        <span class="headerUserName">John Smith</span> <span class="fa fa-angle-down"></span>
                    </div>
                    <div class="clearfix"></div>
                </a>
                <div class="dropdown-menu pull-right userMenu" role="menu">
                    <div class="mobAvatar">
                        <img class="avatar mobAvatarImg" src="images/avatar-1.png" alt="avatar">
                        <div class="mobAvatarName">John Smith</div>
                    </div>
                    <ul>
                        <li><a href="#"><span class="icon-settings"></span>Settings</a></li>
                        <li><a href="profile.html"><span class="icon-user"></span>Profile</a></li>
                        <li><a href="#"><span class="icon-bell"></span>Notifications <span class="badge pull-right bg-red">5</span></a></li>
                        <li class="divider"></li>
                        <li><a href="#"><span class="icon-power"></span>Logout</a></li>
                    </ul>
                </div>
            </div>
            <div class="headerNotifyWraper">
                <a href="#" class="headerNotify dropdown-toggle" data-toggle="dropdown">
                    <span class="notifyIcon icon-bell"></span>
                    <span class="counter">5</span>
                </a>
                <div class="dropdown-menu pull-right notifyMenu" role="menu">
                    <div class="notifyHeader">
                        <span>Notifications</span>
                        <a href="#" class="notifySettings icon-settings"></a>
                        <div class="clearfix"></div>
                    </div>
                    <ul class="notifyList">
                        <li>
                            <a href="#">
                                <img class="avatar pull-left" src="images/avatar-1.png" alt="avatar">
                                <div class="pulse border-grey"></div>
                                <div class="notify pull-left">
                                    <div class="notifyName">Sed ut perspiciatis unde</div>
                                    <div class="notifyTime">5 minutes ago</div>
                                </div>
                                <div class="clearfix"></div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="notifyRound notifyRound-red fa fa-envelope-o"></div>
                                <div class="pulse border-red"></div>
                                <div class="notify pull-left">
                                    <div class="notifyName">Lorem Ipsum is simply dummy text</div>
                                    <div class="notifyTime">20 minutes ago</div>
                                </div>
                                <div class="clearfix"></div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="notifyRound notifyRound-yellow fa fa-heart-o"></div>
                                <div class="pulse border-yellow"></div>
                                <div class="notify pull-left">
                                    <div class="notifyName">It is a long established fact</div>
                                    <div class="notifyTime">2 hours ago</div>
                                </div>
                                <div class="clearfix"></div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="notifyRound notifyRound-magenta fa fa-paper-plane-o"></div>
                                <div class="pulse border-magenta"></div>
                                <div class="notify pull-left">
                                    <div class="notifyName">There are many variations</div>
                                    <div class="notifyTime">1 day ago</div>
                                </div>
                                <div class="clearfix"></div>
                            </a>
                        </li>
                    </ul>
                    <a href="#" class="notifyAll">See All</a>
                </div>
            </div>
            <a href="#" class="mapHandler"><span class="icon-map"></span></a>
            <div class="clearfix"></div>
        </div>

        <!-- Left Side Navigation -->

        <div id="leftSide">
            <nav class="leftNav scrollable">
                <div class="search">
                    <span class="searchIcon icon-magnifier"></span>
                    <input type="text" placeholder="Search for houses, apartments...">
                    <div class="clearfix"></div>
                </div>
                <ul>
                    <li><a href="explore.html"><span class="navIcon icon-compass"></span><span class="navLabel">Explore</span></a></li>
                    <li><a href="single.html"><span class="navIcon icon-home"></span><span class="navLabel">Single</span></a></li>
                    <li><a href="add.html"><span class="navIcon icon-plus"></span><span class="navLabel">New</span></a></li>
                    <li class="hasSub">
                        <a href="#"><span class="navIcon icon-drop"></span><span class="navLabel">Colors</span><span class="fa fa-angle-left arrowRight"></span><span class="badge bg-yellow">5</span></a>
                        <ul class="colors">
                            <li><a href="#">Red <span class="fa fa-circle-o c-red icon-right"></span></a></li>
                            <li><a href="#">Green <span class="fa fa-circle-o c-green icon-right"></span></a></li>
                            <li><a href="#">Blue <span class="fa fa-circle-o c-blue icon-right"></span></a></li>
                            <li><a href="#">Yellow <span class="fa fa-circle-o c-yellow icon-right"></span></a></li>
                            <li><a href="#">Magenta <span class="fa fa-circle-o c-magenta icon-right"></span></a></li>
                        </ul>
                    </li>
                    <li class="hasSub">
                        <a href="#"><span class="navIcon icon-layers"></span><span class="navLabel">Elements</span><span class="fa fa-angle-left arrowRight"></span></a>
                        <ul>
                            <li><a href="buttons.html">Buttons</a></li>
                            <li><a href="icons.html">Icons <span class="badge pull-right bg-yellow">841</span></a></li>
                            <li><a href="grid.html">Grid</a></li>
                            <li><a href="widgets.html">Widgets</a></li>
                            <li><a href="components.html">Components</a></li>
                            <li><a href="lists.html">Lists</a></li>
                            <li><a href="tables.html">Tables</a></li>
                            <li><a href="form.html">Form</a></li>
                        </ul>
                    </li>
                    <li class="hasSub">
                        <a href="#"><span class="navIcon icon-link"></span><span class="navLabel">Pages</span><span class="fa fa-angle-left arrowRight"></span></a>
                        <ul>
                            <li><a href="signin.html">Sign In</a></li>
                            <li><a href="signup.html">Sign Up</a></li>
                            <li><a href="profile.html">Profile</a></li>
                            <li><a href="index.html">Homepage Slideshow</a></li>
                            <li><a href="index-map.html">Homepage Map</a></li>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="blog-post.html">Blog Post</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="leftUserWraper dropup">
                <a href="#" class="avatarAction dropdown-toggle" data-toggle="dropdown">
                    <img class="avatar" src="images/avatar-1.png" alt="avatar"><span class="counter">5</span>
                    <div class="userBottom pull-left">
                        <span class="bottomUserName">John Smith</span> <span class="fa fa-angle-up pull-right arrowUp"></span>
                    </div>
                    <div class="clearfix"></div>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#"><span class="icon-settings"></span>Settings</a></li>
                    <li><a href="profile.html"><span class="icon-user"></span>Profile</a></li>
                    <li><a href="#"><span class="icon-bell"></span>Notifications <span class="badge pull-right bg-red">5</span></a></li>
                    <li class="divider"></li>
                    <li><a href="#"><span class="icon-power"></span>Logout</a></li>
                </ul>
            </div>
        </div>
        <div class="closeLeftSide"></div>

        <!-- Content -->

        <div id="wrapper" class="full">
            <div id="mapView" class="min"><div class="mapPlaceholder"><span class="fa fa-spin fa-spinner"></span> Loading map...</div></div>
            <div id="content" class="max">
                <div class="row whiteBg">
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <h4>Default Buttons</h4>
                        <div class="buttonsWrapper"><a href="#" class="btn btn-default">Default</a> <a href="#" class="btn btn-primary">Primary</a> <a href="#" class="btn btn-success">Success</a> <a href="#" class="btn btn-info">Info</a> <a href="#" class="btn btn-warning">Warning</a> <a href="#" class="btn btn-danger">Danger</a> <a href="#" class="btn btn-default disabled">Disabled</a></div>
                        <div class="buttonsWrapper pb20"><a href="#" class="btn btn-gray">Gray</a> <a href="#" class="btn btn-red">Red</a> <a href="#" class="btn btn-green">Green</a> <a href="#" class="btn btn-blue">Blue</a> <a href="#" class="btn btn-yellow">Yellow</a> <a href="#" class="btn btn-magenta">Magenta</a></div>

                        <h4>Default Buttons - Outline</h4>
                        <div class="buttonsWrapper"><a href="#" class="btn btn-o btn-default">Default</a> <a href="#" class="btn btn-o btn-primary">Primary</a> <a href="#" class="btn btn-o btn-success">Success</a> <a href="#" class="btn btn-o btn-info">Info</a> <a href="#" class="btn btn-o btn-warning">Warning</a> <a href="#" class="btn btn-o btn-danger">Danger</a> <a href="#" class="btn btn-default disabled">Disabled</a></div>
                        <div class="buttonsWrapper pb20"><a href="#" class="btn btn-o btn-gray">Gray</a> <a href="#" class="btn btn-o btn-red">Red</a> <a href="#" class="btn btn-o btn-green">Green</a> <a href="#" class="btn btn-o btn-blue">Blue</a> <a href="#" class="btn btn-o btn-yellow">Yellow</a> <a href="#" class="btn btn-o btn-magenta">Magenta</a></div>

                        <h4>Rounded Buttons</h4>
                        <div class="buttonsWrapper"><a href="#" class="btn btn-round btn-default">Default</a> <a href="#" class="btn btn-round btn-primary">Primary</a> <a href="#" class="btn btn-round btn-success">Success</a> <a href="#" class="btn btn-round btn-info">Info</a> <a href="#" class="btn btn-round btn-warning">Warning</a> <a href="#" class="btn btn-round btn-danger">Danger</a> <a href="#" class="btn btn-round btn-default disabled">Disabled</a></div>
                        <div class="buttonsWrapper pb20"><a href="#" class="btn btn-round btn-gray">Gray</a> <a href="#" class="btn btn-round btn-red">Red</a> <a href="#" class="btn btn-round btn-green">Green</a> <a href="#" class="btn btn-round btn-blue">Blue</a> <a href="#" class="btn btn-round btn-yellow">Yellow</a> <a href="#" class="btn btn-round btn-magenta">Magenta</a></div>

                        <h4>Rounded Buttons - Outline</h4>
                        <div class="buttonsWrapper"><a href="#" class="btn btn-round btn-o btn-default">Default</a> <a href="#" class="btn btn-round btn-o btn-primary">Primary</a> <a href="#" class="btn btn-round btn-o btn-success">Success</a> <a href="#" class="btn btn-round btn-o btn-info">Info</a> <a href="#" class="btn btn-round btn-o btn-warning">Warning</a> <a href="#" class="btn btn-round btn-o btn-danger">Danger</a> <a href="#" class="btn btn-round btn-o btn-default disabled">Disabled</a></div>
                        <div class="buttonsWrapper pb20"><a href="#" class="btn btn-round btn-o btn-gray">Gray</a> <a href="#" class="btn btn-round btn-o btn-red">Red</a> <a href="#" class="btn btn-round btn-o btn-green">Green</a> <a href="#" class="btn btn-round btn-o btn-blue">Blue</a> <a href="#" class="btn btn-round btn-o btn-yellow">Yellow</a> <a href="#" class="btn btn-round btn-o btn-magenta">Magenta</a></div>

                        <h4>Button Size</h4>
                        <div class="buttonsWrapper"><a href="#" class="btn btn-gray btn-lg">Large Button</a> <a href="#" class="btn btn-red">Default Button</a> <a href="#" class="btn btn-green btn-sm">Small Button</a> <a href="#" class="btn btn-blue btn-xs">Extra Small Button</a></div>
                        <div class="buttonsWrapper"><a href="#" class="btn btn-o btn-gray btn-lg">Large Button</a> <a href="#" class="btn btn-o btn-red">Default Button</a> <a href="#" class="btn btn-o btn-green btn-sm">Small Button</a> <a href="#" class="btn btn-o btn-blue btn-xs">Extra Small Button</a></div>
                        <div class="buttonsWrapper"><a href="#" class="btn btn-round btn-gray btn-lg">Large Button</a> <a href="#" class="btn btn-round btn-red">Default Button</a> <a href="#" class="btn btn-round btn-green btn-sm">Small Button</a> <a href="#" class="btn btn-round btn-blue btn-xs">Extra Small Button</a></div>
                        <div class="buttonsWrapper pb20"><a href="#" class="btn btn-round btn-o btn-gray btn-lg">Large Button</a> <a href="#" class="btn btn-round btn-o btn-red">Default Button</a> <a href="#" class="btn btn-round btn-o btn-green btn-sm">Small Button</a> <a href="#" class="btn btn-round btn-o btn-blue btn-xs">Extra Small Button</a></div>

                        <h4>Button Groups</h4>
                        <div class="buttonsWrapper">
                            <div class="btn-group">
                                <button type="button" class="btn btn-o btn-gray">Left</button>
                                <button type="button" class="btn btn-o btn-gray">Middle</button>
                                <button type="button" class="btn btn-o btn-gray">Right</button>
                            </div>
                        </div>
                        <div class="buttonsWrapper">
                            <div class="btn-group">
                                <button type="button" class="btn btn-red">Left</button>
                                <button type="button" class="btn btn-green">Middle</button>
                                <button type="button" class="btn btn-blue">Right</button>
                            </div>
                        </div>
                        <div class="buttonsWrapper">
                            <div class="btn-group">
                                <button type="button" class="btn btn-o btn-red">Left</button>
                                <button type="button" class="btn btn-o btn-green">Middle</button>
                                <button type="button" class="btn btn-o btn-blue">Right</button>
                            </div>
                        </div>
                        <div class="buttonsWrapper">
                            <div class="btn-group">
                                <button type="button" class="btn btn-o btn-round btn-gray">Left</button>
                                <button type="button" class="btn btn-o btn-round btn-gray">Middle</button>
                                <button type="button" class="btn btn-o btn-round btn-gray">Right</button>
                            </div>
                        </div>
                        <div class="buttonsWrapper">
                            <div class="btn-group">
                                <button type="button" class="btn btn-round btn-red">Left</button>
                                <button type="button" class="btn btn-round btn-green">Middle</button>
                                <button type="button" class="btn btn-round btn-blue">Right</button>
                            </div>
                        </div>
                        <div class="buttonsWrapper">
                            <div class="btn-group">
                                <button type="button" class="btn btn-o btn-round btn-red">Left</button>
                                <button type="button" class="btn btn-o btn-round btn-green">Middle</button>
                                <button type="button" class="btn btn-o btn-round btn-blue">Right</button>
                            </div>
                        </div>
                        <h5>Vertical Button Groups</h5>
                        <div class="buttonsWrapper">
                            <div class="btn-group-vertical">
                                <button type="button" class="btn btn-o btn-gray">Top</button>
                                <button type="button" class="btn btn-o btn-gray">Middle</button>
                                <button type="button" class="btn btn-o btn-gray">Bottom</button>
                            </div>
                            <div class="btn-group-vertical">
                                <button type="button" class="btn btn-red">Top</button>
                                <button type="button" class="btn btn-green">Middle</button>
                                <button type="button" class="btn btn-blue">Bottom</button>
                            </div>
                            <div class="btn-group-vertical">
                                <button type="button" class="btn btn-o btn-red">Top</button>
                                <button type="button" class="btn btn-o btn-green">Middle</button>
                                <button type="button" class="btn btn-o btn-blue">Bottom</button>
                            </div>
                        </div>
                        <div class="buttonsWrapper">
                            <div class="btn-group-lg btn-group-vertical">
                                <button type="button" class="btn btn-round btn-red">Top</button>
                                <button type="button" class="btn btn-round btn-green">Middle</button>
                                <button type="button" class="btn btn-round btn-blue">Bottom</button>
                            </div>
                            <div class="btn-group-vertical">
                                <button type="button" class="btn btn-round btn-red">Top</button>
                                <button type="button" class="btn btn-round btn-green">Middle</button>
                                <button type="button" class="btn btn-round btn-blue">Bottom</button>
                            </div>
                            <div class="btn-group-sm btn-group-vertical">
                                <button type="button" class="btn btn-round btn-red">Top</button>
                                <button type="button" class="btn btn-round btn-green">Middle</button>
                                <button type="button" class="btn btn-round btn-blue">Bottom</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <h5>Nested Button Groups</h5>
                        <div class="buttonsWrapper">
                            <div class="btn-group">
                                <button type="button" class="btn btn-gray">1</button>
                                <button type="button" class="btn btn-yellow">2</button>
                                <button type="button" class="btn btn-green">3</button>

                                <div class="btn-group">
                                    <button type="button" class="btn btn-red dropdown-toggle" data-toggle="dropdown">
                                    Dropdown
                                    <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Dropdown link</a></li>
                                        <li><a href="#">Dropdown link</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <h5>Justified button groups</h5>
                        <div class="buttonsWrapper">
                            <div class="btn-group btn-group-justified">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-o btn-gray">Left</button>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-o btn-gray">Middle</button>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-o btn-gray">Right</button>
                                </div>
                            </div>
                        </div>
                        <div class="buttonsWrapper">
                            <div class="btn-group btn-group-justified">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-red">Left</button>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-green">Middle</button>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-blue">Right</button>
                                </div>
                            </div>
                        </div>
                        <div class="buttonsWrapper pb20">
                            <div class="btn-group btn-group-justified">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-o btn-red">Left</button>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-o btn-green">Middle</button>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-o btn-blue">Right</button>
                                </div>
                            </div>
                        </div>

                        <h4>Dropdown Buttons</h4>
                        <h5>Single Button Dropdowns</h5>
                        <div class="buttonsWrapper">
                            <div class="btn-group">
                                <button type="button" class="btn btn-gray dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-red dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-blue dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="buttonsWrapper">
                            <div class="btn-group">
                                <button type="button" class="btn btn-gray btn-lg dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-red dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-green btn-sm dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-blue btn-xs dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                        </div>
                        <h5>Split Button Dropdowns & Variation</h5>
                        <div class="buttonsWrapper pb20">
                            <div class="btn-group">
                                <button type="button" class="btn btn-gray">Action</button>
                                <button type="button" class="btn btn-gray dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-red">Action</button>
                                <button type="button" class="btn btn-red dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                            <div class="btn-group dropup">
                                <button type="button" class="btn btn-green">Action</button>
                                <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                            <div class="btn-group dropup">
                                <button type="button" class="btn btn-blue">Action</button>
                                <button type="button" class="btn btn-blue dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                        </div>

                        <h4>Buttons With Icon</h4>
                        <div class="buttonsWrapper"><a href="#" class="btn btn-red"><span class="fa fa-gear"></span> Settings</a> <a href="#" class="btn btn-o btn-green"><span class="fa fa-phone"></span> Call</a> <a href="#" class="btn btn-round btn-blue"><span class="fa fa-paper-plane"></span> Share</a> <a href="#" class="btn btn-round btn-o btn-yellow"><span class="fa fa-support"></span> Help</a></div>
                        <div class="buttonsWrapper"><a href="#" class="btn btn-o btn-green btn-block"><span class="fa fa-bars pull-left"></span>Block button with icon</a></div>
                        <div class="buttonsWrapper pb20"><a href="#" class="btn btn-green btn-lg btn-block">Block button with icon<span class="fa fa-bars pull-right"></span></a></div>

                        <h4>Button Icon</h4>
                        <div class="buttonsWrapper pb20"><a href="#" class="btn btn-icon btn-facebook"><span class="fa fa-facebook"></span></a> <a href="#" class="btn btn-icon btn-twitter"><span class="fa fa-twitter"></span></a> <a href="#" class="btn btn-icon btn-google"><span class="fa fa-google-plus"></span></a> <a href="#" class="btn btn-icon btn-pinterest"><span class="fa fa-pinterest"></span></a> <a href="#" class="btn btn-icon btn-o btn-facebook"><span class="fa fa-facebook"></span></a> <a href="#" class="btn btn-icon btn-o btn-twitter"><span class="fa fa-twitter"></span></a> <a href="#" class="btn btn-icon btn-o btn-google"><span class="fa fa-google-plus"></span></a> <a href="#" class="btn btn-icon btn-o btn-pinterest"><span class="fa fa-pinterest"></span></a></div>

                        <h4>Button Icon Rounded</h4>
                        <div class="buttonsWrapper pb20"><a href="#" class="btn btn-icon btn-round btn-facebook"><span class="fa fa-facebook"></span></a> <a href="#" class="btn btn-icon btn-round btn-twitter"><span class="fa fa-twitter"></span></a> <a href="#" class="btn btn-icon btn-round btn-google"><span class="fa fa-google-plus"></span></a> <a href="#" class="btn btn-icon btn-round btn-pinterest"><span class="fa fa-pinterest"></span></a> <a href="#" class="btn btn-icon btn-round btn-o btn-facebook"><span class="fa fa-facebook"></span></a> <a href="#" class="btn btn-icon btn-round btn-o btn-twitter"><span class="fa fa-twitter"></span></a> <a href="#" class="btn btn-icon btn-round btn-o btn-google"><span class="fa fa-google-plus"></span></a> <a href="#" class="btn btn-icon btn-round btn-o btn-pinterest"><span class="fa fa-pinterest"></span></a></div>

                        <h4>Special Buttons</h4>
                        <div class="buttonsWrapper">
                            <a class="btn btn-o btn-gray" href="#" data-toggle-class="btn-green">
                                <span class="fa fa-save state"></span> <span class="state">Save</span>
                                <span class="fa fa-check state-active"></span> <span class="state-active">Success</span>
                            </a>
                            <a class="btn btn-o btn-yellow" href="#" data-toggle="button">
                                <span class="fa fa-star-o state"></span>
                                <span class="fa fa-star text-white state-active"></span>
                            </a>
                            <a class="btn btn-round btn-success" href="#" data-toggle="button">
                                <span class="fa fa-thumbs-o-up state"></span> <span class="state">12</span>
                                <span class="fa fa-thumbs-up state-active"></span> <span class="state-active">13</span>
                            </a>
                        </div>
                        <div class="buttonsWrapper">
                            <div class="btn-group" data-toggle="button">
                                <a href="#" class="btn btn-red">
                                    <span class="fa fa-circle-o state"></span> <span class="state">Left</span>
                                    <span class="fa fa-circle state-active"></span> <span class="state-active">Left</span>
                                </a>
                                <a href="#" class="btn btn-green">
                                    <span class="fa fa-circle-o state"></span> <span class="state">Middle</span>
                                    <span class="fa fa-circle state-active"></span> <span class="state-active">Middle</span>
                                </a>
                                <a href="#" class="btn btn-blue">
                                    <span class="fa fa-circle-o state"></span> <span class="state">Right</span>
                                    <span class="fa fa-circle state-active"></span> <span class="state-active">Right</span>
                                </a>
                            </div>
                        </div>
                        <h5>Select Button</h5>
                        <div class="buttonsWrapper">
                            <div class="btn-group dropup">
                                <button data-toggle="dropdown" class="btn btn-o btn-gray dropdown-toggle">
                                    <span class="dropdown-label">Option 1</span> <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-select">
                                    <li class="active"><input type="radio" name="ds1" checked="checked"><a href="#">Option 1</a></li>
                                    <li><input type="radio" name="ds1"><a href="#">Option 2</a></li>
                                    <li><input type="radio" name="ds1"><a href="#">Option 3</a></li>
                                    <li class="disabled"><input type="radio" name="ds1" disabled=""><a href="#">Option disabled</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="clearfix"></div>
        </div>

        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/jquery-ui.min.js"></script>
        <script src="js/jquery-ui-touch-punch.js"></script>
        <script src="js/jquery.placeholder.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/jquery.touchSwipe.min.js"></script>
        <script src="js/jquery.slimscroll.min.js"></script>
        <script src="js/jquery.visible.js"></script>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=true&amp;libraries=geometry&amp;libraries=places" type="text/javascript"></script>
        <script src="js/infobox.js"></script>
        <script src="js/jquery.tagsinput.min.js"></script>
        <script src="js/bootstrap-datepicker.js"></script>
        <script src="js/app.js" type="text/javascript"></script>
    </body>
</html>